<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件管理</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 20px;
            color: #333;
        }
        .upload-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            background-color: #fff;
        }
        h2 {
            color: #2196f3;
            border-bottom: 2px solid #e3f2fd;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .upload-form {
            margin-bottom: 30px;
        }
        .file-input {
            display: none;
        }
        .file-label {
            display: inline-block;
            padding: 10px 15px;
            background-color: #2196f3;
            color: white;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        .file-name {
            margin-left: 10px;
            font-style: italic;
        }
        .upload-btn {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .upload-btn:hover {
            background-color: #45a049;
        }
        .upload-btn:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        .progress-container {
            width: 100%;
            height: 20px;
            background-color: #f0f0f0;
            border-radius: 4px;
            margin-top: 20px;
            display: none;
        }
        .progress-bar {
            height: 100%;
            background-color: #4CAF50;
            border-radius: 4px;
            width: 0%;
            transition: width 0.3s;
        }
        .message {
            margin-top: 20px;
            padding: 10px;
            border-radius: 4px;
        }
        .success {
            background-color: #dff0d8;
            color: #3c763d;
        }
        .error {
            background-color: #f2dede;
            color: #a94442;
        }
        .file-list {
            margin-top: 30px;
        }
        .file-list-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .file-list-item:hover {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div class="upload-container">
        <h2>文件上传管理</h2>
        
        <div class="upload-form">
            <input type="file" id="fileInput" class="file-input">
            <label for="fileInput" class="file-label">选择文件</label>
            <span id="fileName" class="file-name">未选择文件</span>
            <br><br>
            <button id="uploadBtn" class="upload-btn" disabled>上传文件</button>
            
            <div id="progressContainer" class="progress-container">
                <div id="progressBar" class="progress-bar"></div>
            </div>
            
            <div id="message" class="message" style="display: none;"></div>
        </div>
        
        <div class="file-list">
            <h3>已上传文件列表</h3>
            <div id="fileList">
                <!-- 文件列表将通过JavaScript动态加载 -->
                <div class="file-list-item">加载中...</div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fileInput = document.getElementById('fileInput');
            const fileName = document.getElementById('fileName');
            const uploadBtn = document.getElementById('uploadBtn');
            const progressContainer = document.getElementById('progressContainer');
            const progressBar = document.getElementById('progressBar');
            const message = document.getElementById('message');
            const fileList = document.getElementById('fileList');
            
            // 监听文件选择
            fileInput.addEventListener('change', function() {
                if (fileInput.files.length > 0) {
                    fileName.textContent = fileInput.files[0].name;
                    uploadBtn.disabled = false;
                } else {
                    fileName.textContent = '未选择文件';
                    uploadBtn.disabled = true;
                }
            });
            
            // 上传文件
            uploadBtn.addEventListener('click', function() {
                if (fileInput.files.length === 0) return;
                
                const file = fileInput.files[0];
                const formData = new FormData();
                formData.append('file', file);
                
                // 显示进度条
                progressContainer.style.display = 'block';
                progressBar.style.width = '0%';
                
                // 禁用上传按钮
                uploadBtn.disabled = true;
                
                // 发送上传请求
                const xhr = new XMLHttpRequest();
                xhr.open('POST', '/api/upload', true);
                
                // 监听上传进度
                xhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        const percentComplete = (e.loaded / e.total) * 100;
                        progressBar.style.width = percentComplete + '%';
                    }
                });
                
                // 处理上传完成
                xhr.onload = function() {
                    if (xhr.status === 200) {
                        showMessage('文件上传成功！', 'success');
                        // 重置表单
                        fileInput.value = '';
                        fileName.textContent = '未选择文件';
                        // 刷新文件列表
                        loadFileList();
                    } else {
                        showMessage('文件上传失败: ' + xhr.statusText, 'error');
                    }
                    progressContainer.style.display = 'none';
                    uploadBtn.disabled = false;
                };
                
                // 处理上传错误
                xhr.onerror = function() {
                    showMessage('上传过程中发生错误', 'error');
                    progressContainer.style.display = 'none';
                    uploadBtn.disabled = false;
                };
                
                xhr.send(formData);
            });
            
            // 显示消息
            function showMessage(text, type) {
                message.textContent = text;
                message.className = 'message ' + type;
                message.style.display = 'block';
                
                // 5秒后隐藏消息
                setTimeout(function() {
                    message.style.display = 'none';
                }, 5000);
            }
            
            // 加载文件列表
            function loadFileList() {
                fetch('/api/files')
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('获取文件列表失败');
                        }
                        return response.json();
                    })
                    .then(data => {
                        fileList.innerHTML = '';
                        if (data.length === 0) {
                            fileList.innerHTML = '<div class="file-list-item">暂无上传文件</div>';
                            return;
                        }
                        
                        data.forEach(file => {
                            const fileItem = document.createElement('div');
                            fileItem.className = 'file-list-item';
                            fileItem.innerHTML = `
                                <span>${file.name}</span>
                                <span>${formatFileSize(file.size)} | ${formatDate(file.uploadTime)}</span>
                            `;
                            fileList.appendChild(fileItem);
                        });
                    })
                    .catch(error => {
                        fileList.innerHTML = `<div class="file-list-item">加载文件列表失败: ${error.message}</div>`;
                    });
            }
            
            // 格式化文件大小
            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }
            
            // 格式化日期
            function formatDate(timestamp) {
                const date = new Date(timestamp);
                return date.toLocaleString('zh-CN');
            }
            
            // 页面加载时获取文件列表
            loadFileList();
        });
    </script>
</body>
</html>